<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset = "utf-8" />
		<style type="text/css">
		*{margin: 0px; padding: 0px}
		#div1{position: relative; border: 1px solid black; width: 750px; height: 225px; margin: 100px auto; overflow: hidden;}
		#div1 ul{position: absolute; left: 0px}
		#div1 ul li{list-style: none; float: left;; width: 150px; height: 150px; margin: 70px 50px 5px 50px}
		#div1 ul li img{width: 150px; height: 150px;}
		</style>
		<script type="text/javascript" src = "js/perfect_startMove.js"></script>
		<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			var oUl = oDiv.getElementsByTagName("ul")[0];
			var aLi = oUl.getElementsByTagName("li");



			//将这三张图片再贴一份在尾巴上
			oUl.innerHTML += oUl.innerHTML;
			oUl.style.width = aLi.length * (aLi[0].offsetWidth + 100) + "px";

			//启动定时器开始循环滚动
			var timer = null;
			var index = 0;


			timer = setInterval(function(){
				if(oUl.offsetLeft <= - oUl.offsetWidth / 2){
					oUl.style.left = 0;
				}
				//滚动
				startMove(oUl, {left: oUl.offsetLeft - aLi[0].offsetWidth - 100}, function(){
					document.title = oUl.offsetLeft / (aLi[0].offsetWidth + 100);
				});

				//放大
				//先将所有的img缩小
				for(var i = 0; i < aLi.length; i++){
					startMove(aLi[i].children[0], {width: 150, height: 150, marginLeft: 0, marginTop: 0});
				}




			}, 2000);
		}

		</script>
	</head>
	<body>
		<div id = "div1">
			<ul>
				<li><img src = "img/1.jpg"></li>
				<li><img src = "img/2.jpg"></li>
				<li><img src = "img/3.jpg"></li>
			</ul>
		</div>
	</body>
</html>










